<!--
 * @Author: your name
 * @Date: 2021-02-21 16:19:25
 * @LastEditTime: 2021-04-17 09:56:14
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /dvr-ui/src/components/video_play.vue
-->
<template>
  <div id="mse">
  </div>
</template>

<script>
import Player from 'xgplayer';
export default {
  name: 'mse',
  data () {
    return {
      Player: null
    }
  },
  mounted () {
    this.initPlayer('http://localhost:8000/media/video/16.flv');
  },
  methods: {
    // 设置视频配置(注意：initPlayer应放在异步函数里或mounted之后，不可在created里直接加载，否则不生效)
    initPlayer (url) {
      this.Player = new Player({
        // el、url为必选配置，其它为可选配置
        el: document.querySelector('#mse'),
        url: url,
        width: '100%',
        height: '3.7rem',
        volume: 0.6,    // 初始音量
        autoplay: false,  // 自动播放
        playbackRate: [0.5, 0.75, 1, 1.5, 2],   // 当前播放速度
        defaultPlaybackRate: 1,     // 播放速度设置为1
        playsinline: true,
      });
    },
  }
}
</script>